<template>
  <div class="product-comment" v-if="titles">
    <van-nav-bar title="商品评价页" left-arrow @click-left="$router.back()" />
    <van-tabs v-model="active" @click="changeComment">
      <van-tab :title="item.title + '(' + item.count + ')'" v-for="(item, index) in titles" :key="index"> </van-tab>
    </van-tabs>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <div class="comment-list" v-for="item in comment_list" :key="item.comment_id" style="margin: 10px; padding: 10px 17px">
        <div class="comment-header">
          <img :src="item.user.avatar_url" alt="" v-if="item.user.avatar_url" />
          <img v-else src="@/assets/default-avatar.png" alt="" />

          <span class="number">{{ item.user.nick_name }}</span>
          <van-rate v-if="item.score === 10" :value="5" class="rate" :size="13" color="#ffd21e" void-icon="star" void-color="#eee" />
          <van-rate v-else-if="item.score === 20" :value="3" class="rate" :size="13" color="#ffd21e" void-icon="star" void-color="#eee" />
          <van-rate v-else :value="1" class="rate" :size="13" color="#ffd21e" void-icon="star" void-color="#eee" />
          <span class="date">{{ item.create_time }}</span>
        </div>
        <div class="comment-content">
          <p>{{ item.content }}</p>
          <div class="comment-img">
            <img :src="img.image_url" alt="" v-for="img in item.images" :key="img.id" />
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getCommentList, getCommentCount } from '@/apis/product'
export default {
  name: 'ProductComment',
  data () {
    return {
      active: 0,
      loading: false,
      finished: true,
      value: 0,
      params: {
        scoreType: -1,
        goodsId: '',
        page: 1
      },
      comment_total: {},
      comment_list: [],
      myTitle: [
        { title: '全部', count: 0 },
        { title: '好评', count: 0 },
        { title: '中评', count: 0 },
        { title: '差评', count: 0 }
      ]
    }
  },
  computed: {
    titles () {
      Object.keys(this.comment_total).forEach((key, index) => {
        this.myTitle[index].count = this.comment_total[key]
      })
      return this.myTitle
    },
    goodsId () {
      return this.$route.query.goodsId
    }
  },
  created () {
    this.getInitData()
  },
  methods: {
    async getInitData () {
      this.params.goodsId = this.goodsId
      let res = await getCommentList(this.params)
      const {
        list: { data }
      } = res.data
      this.comment_list = data
      res = await getCommentCount(this.params.goodsId)
      const {
        data: { total }
      } = res
      this.comment_total = total
    },
    async changeComment (index) {
      this.params.scoreType = index * 10
      const res = await getCommentList(this.params)
      const {
        list: { data }
      } = res.data
      this.comment_list = data
    }
  }
}
</script>

<style lang="less" scoped>
.product-comment {
  .van-list > .comment-list:first-child {
    margin: 10px;
  }
  .comment-list {
    margin: 10px;
    padding: 0 !important;
    .comment-header {
      height: 80px;
      line-height: 80px;
      font-size: 13px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        vertical-align: middle;
      }
      .number {
        margin: 0px 15px;
        color: #a49a95;
      }
      .date {
        float: right;
        line-height: 80px;
      }
    }

    .comment-img {
      img {
        // margin: 10px;
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>
